<template>
  <div>
    <Row class="y_query_right">
      <i-col span="24" :xs="{span: 24}">
        <Button type="primary" icon="md-add" class="tiy_btn y_condition" @click="add" v-has=tRole.OTHER_2_101>新增</Button>
      </i-col>
    </Row>
    <hr>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Input placeholder="运费名称" v-model.trim="param.postageName" clearable class="y_condition"></Input>
        <Select v-model="param.method" placeholder="配送方式" clearable class="y_condition" style="text-align: left;">
          <Option value="">请选择</Option>
          <Option v-for="item in postageMethodDict" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
        <Button type="primary" icon="md-search" class="tiy_btn y_condition" @click="webList">查询</Button>
      </i-col>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border class="base_table"
           :columns="tableTitles" :data="postageList"
           no-data-text="暂无数据"></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="postageList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in postageList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left" >

              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="运费名称" >{{item.name}}</KeyValueView>
              <KeyValueView title="英文名称" >{{item.enName}}</KeyValueView>
              <KeyValueView title="最短周期" >{{ item.minTime}}</KeyValueView>
              <KeyValueView title="最长周期" >{{ item.maxTime}}</KeyValueView>
            </i-col>
            <i-col>
              <Button ghost size="small" icon="md-create" type="primary" @click="modify(item.id)" style="margin-right: 0.5rem">编辑</Button>
              <Button ghost size="small" icon="md-trash" type="error"  @click="delete2(item.id,item.name)" >删除</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>

    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator />
    </div>

    <Modal
      v-model="status.modifyModal.isShow"
      title="运费规则管理"
      :loading="status.modifyModal.isLoading"
      @on-ok="savePostage"
      :scrollable="true"
      :styles="{width:'75%',height:'10rem'}" >
      <Form :model="param.postage"   :label-width="120" ref="postageForm"  :rules="postageRules" style="margin:2rem 0px 1rem 0px">
        <Row>
          <i-col span="10" offset="1">
            <FormItem label="运费名称 :" prop="name">
              <Input v-model.trim="param.postage.name" placeholder="请输入" class="form_step"></Input>
            </FormItem>
          </i-col>
          <i-col span="12" offset="1">
            <FormItem label="配送方式 :" prop="method" inline>
              <Select v-model="param.postage.method" :disabled="param.postage.id!=''" class="form_step" @on-change="methodChanged">
                <Option v-for="item in postageMethodDict" :value="item.value" :key="item.value">{{ item.name }}快递</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="22" offset="1">
            <FormItem label="运费英文名称 :" prop="enName">
              <Input v-model.trim="param.postage.enName" placeholder="请输入" class="form_step" style="width:100%;"></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="22" offset="1">
            <FormItem label="后台备注 :" prop="innerNote">
              <Input type="textarea"  v-model.trim="param.postage.innerNote" class="form_step" style="width:100%;" maxlength="120" show-word-limit></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="10" offset="1">
            <FormItem label="最短周期(天)  :" inline prop="minTime" >
              <InputNumber v-model="param.postage.minTime" :min=1 :step=1 :precision=0 class="form_step" @on-change="changePeriod"></InputNumber>
            </FormItem>
          </i-col>

          <i-col span="12" offset="1">
            <FormItem label="最长周期(天)  :" inline prop="maxTime" >
              <InputNumber v-model="param.postage.maxTime" :min=1 :step=1 :precision=0 class="form_step" @on-change="changePeriod"></InputNumber>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="22" offset="1">
            <FormItem label="最小包裹重量(g)  :" inline prop="minWeight" >
              <InputNumber v-model="param.postage.minWeight" :min=0 :step=1 :precision=0 class="form_step"></InputNumber>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="22" offset="1">
            <FormItem label="运费描述 :" prop="note">
              <Input type="textarea" v-model.trim="param.postage.note" class="form_step" style="width:100%;" maxlength="800" show-word-limit :rows="4"></Input>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="24">
          <div class="modal_base_div">
            <div class="modal_base_div_title"><strong>运费配置 :</strong></div>
            <Row style="margin-left:120px;height:35px;font-weight:900">
              <i-col span="5"  >
                <label class="postageRules_label">首重(g)</label>
              </i-col>

              <i-col span="4" >
                <label class="postageRules_label"> 首重运费($)</label>
              </i-col>

              <i-col span="5"  >
                <label class="postageRules_label" style="width:30%">最大重量(g/-1为不限)</label>
              </i-col>
              <i-col span="4" >
                <label class="postageRules_label"> 阶梯重量(g)</label>
              </i-col>
              <i-col span="4" >
                <label class="postageRules_label"> 阶梯价格($)</label>
              </i-col>
            </Row>

           <FormItem  prop="firstWeight" v-for="(item, index) in  param.postage.postageRules"   >
             <Row>
               <i-col span="5">
                 <div>
                   <InputNumber v-model="item.firstWeight" placeholder="请输入" :min=0 :step=1 :precision=0
                                class="postageRules_step" :ref="'firstWeight'+index"></InputNumber>
                   <div class="info_key">折合{{item.firstWeight/1000}}kg</div>
                 </div>
               </i-col>
               <i-col span="4">
                 <InputNumber v-model="item.firstFee" :min=0 :step=1 :ref="'firstFee'+index"
                              class="postageRules_step_price" active-change=false></InputNumber>
               </i-col>
               <i-col span="5" style="display:flex">
                 <div>
                   <InputNumber v-model="item.maxWeight" placeholder="请输入"
                                :min="index+1==param.postage.postageRules.length?-1:0" :step=1 :precision=0
                                class="postageRules_step" :ref="'maxWeight'+index"></InputNumber>
                   <div v-if="item.maxWeight>0" class="info_key">
                     合计{{item.maxWeight>0?item.maxWeight/1000:0}}kg
                   </div>
                   <div v-if="item.maxWeight===-1" class="info_key">
                     无重量限制
                   </div>
                 </div>
               </i-col>
               <i-col span="4">
                 <div>
                   <InputNumber v-model="item.tieredWeight" :ref="'tieredWeight'+index" placeholder="步长" :min=0 :step=1
                                class="postageRules_step"></InputNumber>
                   <div class="info_key">折合{{item.tieredWeight/1000}}kg</div>
                 </div>
               </i-col>
               <i-col span="4">
                 <InputNumber v-model="item.tieredFee" :ref="'tieredFee'+index" placeholder="请输入" :min=0 :step=1
                              class="postageRules_step_price"></InputNumber>
               </i-col>
               <i-col span="2">
                 <Button @click="postageRulesDel(index)">删除</Button>
               </i-col>
             </Row>

          </FormItem>
            <div style="text-align: center"  v-show="param.postage.method==100||param.postage.method==101">
            <Button type="info" ghost @click="postageRulesAdd" icon="md-add" style="width: 120px">新增配置</Button>
            </div>
          </div>
          </i-col>
        </Row>

      </Form>
      <div  >

      <hr>
        <!--国家运费区域-->
        <Row>
          <i-col span="24" style="text-align: center">
            <div style="margin-right: 32px;font-size: 1.2em;margin-bottom: 1rem;" >
              <Checkbox v-model="isOnlyOpened">仅展示已经开放的国家和地区</Checkbox>
            </div>
          </i-col>
        </Row>

        <Row>
          <i-col span="24">
            <div style="overflow-y: auto;height:300px">
              <CheckboxGroup v-model="param.selectedCountryIds">
                <Row v-for="n in (Math.ceil(countryList.length / 3)) ">
                <i-col span="8" v-for="item in (n == Math.ceil(countryList.length / 3) ? countryList.slice((n - 1) * 3) : countryList.slice((n - 1) * 3, n * 3))" >
                  <div :class="['country_div',param.selectedCountryIds.indexOf(item.id)!==-1?'countrySelected':'']"
                       @click="selectCountry(item)"  v-show="!isOnlyOpened || item.state === 0">
                    <Checkbox :label="item.id" :value="param.selectedCountryIds.indexOf(item.id)!==-1">&nbsp;</Checkbox>
                    <img :src="yunPath+item.countryImg" />
                    <div style="text-align: left">
                      <span>{{item.countryCn}}</span>
                      <br>
                      <span>{{item.countryEn}}</span>
                    </div>
                  </div>
                </i-col>
                </Row>
              </CheckboxGroup>
            </div>
          </i-col>
        </Row>
      </div>
      <div style="clear:both"></div>
    </Modal>
    <Modal
      v-model="status.actionModal.isShow"
      :title="status.actionModal.title"
      :loading="status.actionModal.isLoading"
      @on-ok="status.actionModal.action">
      <br>
      <p>确定删除该<strong>运费模板</strong>吗?</p>
      <br>
    </Modal>
  </div>
</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/postage/postage_data";
  import {webList,init,actionDelete,savePostage,getCountries,modify} from "./js/postage/postage_fun";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    components: {ICol,KeyValueView},
    data() {
      return {
      	// postageMethodDict:[],
        tRole:{
          OTHER_2_101: "OTHER-2-101"
        },
        page: tiyData.tPage,
        countryList: tiyData.tData.countryList,
        postageList:tiyData.tData.postageList,
        yunPath: this.$store.getters.imgPrefix,
        status: tiyData.tStatus,
        param: tiyData.tParam,
        postageRules:tiyData.tStatus.postageRules,
        tableTitles:tiyData.listTableTitles(this),
        postageMethodDict:this.$store.getters.dictionaries.postageMethodDict,
        isOnlyOpened:true,
      }
    },
    computed: {
    },
    methods: {
      webList(){
        tiyData.tPage.currentPage = 1;
        webList(this,tiyData);
       },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      add(){
       this.$refs['postageForm'].resetFields();
       tiyData.tParam.postage.id='';
       tiyData.tParam.postage.name='';
       tiyData.tParam.postage.method=0;
       tiyData.tParam.postage.firstWeight=0;
       tiyData.tParam.postage.firstFee='';
       tiyData.tParam.postage.tieredWeight=0;
       tiyData.tParam.postage.tieredFee='';
       tiyData.tParam.postage.minTime=1;
       tiyData.tParam.postage.maxTime=1;
       tiyData.tParam.postage.minWeight = 0;
       this.$ySpliceAll(tiyData.tParam.postage.postageRules, tiyData.tParam.selectedCountryIds);
       tiyData.tStatus.modifyModal.isShow=true;
       tiyData.tStatus.modifyModal.title="新增运费";
      },
      modify(postageId){
        tiyData.tStatus.postageId = postageId;
        this.$ySpliceAll(tiyData.tParam.selectedCountryIds);
        modify(this,tiyData);
      },
      savePostage(){
        savePostage(this,tiyData);
      },
      methodChanged(value){
        if(value){
          tiyData.tParam.postage.postageRules.splice(0,tiyData.tParam.postage.postageRules.length);
          if(value==100){//普通快递
            tiyData.tParam.initCommonConfig.forEach(function(item){
              let configItem={
                firstWeight:item.firstWeight,
                firstFee:item.firstFee,
                tieredWeight:item.tieredWeight,
                tieredFee:item.tieredFee,
                maxWeight:item.maxWeight
              };
              tiyData.tParam.postage.postageRules.push(configItem);
            });
          }else if(value==101){//商业快递
            tiyData.tParam.initBusinessConfig.forEach(function(item){
              let configItem={
                firstWeight:item.firstWeight,
                firstFee:item.firstFee,
                tieredWeight:item.tieredWeight,
                tieredFee:item.tieredFee,
                maxWeight:item.maxWeight
              };
              tiyData.tParam.postage.postageRules.push(configItem);
            });
          }
          tiyData.tStatus.postageMethod=value;
        }
      },
      delete2(postageId, postageName){
        tiyData.tStatus.actionModal.title="删除运费";
        tiyData.tStatus.actionModal.isShow=true;
        tiyData.tStatus.actionModal.content="确定删除吗？";
        tiyData.tStatus.actionModal.action=this.actionDel;
        tiyData.tStatus.postageId=postageId;
        tiyData.tStatus.postageName = postageName;
      },
      actionDel(){
        actionDelete(this,tiyData);
      },

      selectCountry(item){
        let selectedIndex = this.param.selectedCountryIds.indexOf(item.id);
        if(selectedIndex===-1){
          this.param.selectedCountryIds.push(item.id);
        }else{
          this.param.selectedCountryIds.splice(selectedIndex,1);
        }
      },
      postageRulesAdd(){
        if(tiyData.tParam.postage.postageRules.length>0){
          let postageRulesPre = tiyData.tParam.postage.postageRules[tiyData.tParam.postage.postageRules.length-1];
          tiyData.tParam.postage.postageRules.push({
            firstWeight:postageRulesPre==-1?0:postageRulesPre.maxWeight,
            firstFee:0,
            tieredWeight:0,
            tieredFee:0,
            maxWeight:postageRulesPre.maxWeight+1000
          });
        }else{
          tiyData.tParam.postage.postageRules.push({
            firstWeight:0,
            firstFee:0,
            tieredWeight:0,
            tieredFee:0,
            maxWeight:2000
          });
        }
      },
      postageRulesDel(index){
        tiyData.tParam.postage.postageRules.splice(index,1);
      },
      changePeriod(){ //配送周期调整时设置运费描述
          if(tiyData.tParam.postage.minTime && tiyData.tParam.postage.maxTime){
              let period = "Delivery Time: " + tiyData.tParam.postage.minTime + "-"
                  + tiyData.tParam.postage.maxTime + " business days.";
              let note = tiyData.tParam.postage.note;
              if(!note){ //没有描述时直接设置为周期描述
                  tiyData.tParam.postage.note = period;
              } else {
                  if(note.indexOf("Delivery Time:") >= 0){ //如果描述内容中已经有关于周期的描述，覆盖为新的周期描述
                      tiyData.tParam.postage.note = period + note.substr(note.indexOf(".") + 1);
                  } else { //描述内容中没有关于周期的描述，添加周期描述。
                      tiyData.tParam.postage.note = period + " " + note;
                  }
              }
          }
      }
    },
    mounted(){
      init(this,tiyData);
      getCountries(this,tiyData);
      // webList(this,tiyData);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional) "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }
  .disSelect {
    background-color: #dbdbdb;
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }
  .itemChecked{
    background-color:#FDBDBD
  }
  .form_step {
    width:180px;
  }
  .postageRules_step {
    width:105px;
  }
  .postageRules_step_price {
    width:80px;
  }
  .postageRules_label {
    width:20%;
  }

  .country_div{
    border: solid #f1f1f1 1px;
    height: 3rem;
    margin: 8px;
    padding: 8px;
    display: -webkit-flex; /* Safari */
    display: flex;
    cursor: pointer;
    align-items:center;
    font-size: 0.9em;

    img{
      width: 2rem;
      margin-right: 1rem
    }
  }

  .countrySelected{
    background-color:#EDE7F6
  }
  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }
  .ivu-form-item-content {
    margin-left: 80px !important
  }

  .info_key {
    color: #9e9e9e;
    font-size: 10px;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
